Borox - Personal Portfolio HTML Template.

Introduction

  • Item Name : Borox - Personal Portfolio HTML Template.
  • Item Version : 1
  • Author : ashishmaraviya
  • Copyright : 2023

First of all, thank you so much for purchasing this Borox Template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML, CSS | SCSS & JS knowledge is required to customize this item. You may learn basics here and here .

Getting Started

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Visual studio code, Dreamweaver, Sublime Text or Notepad++)
  2. For SCSS build up (eg: koala, prepos, codekit etc...)
  3. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

  • HTML
  • CSS
  • SCSS
  • JS
  • IMAGES(Demo images only)
  • FONT

Files Structure :

  • css
    • Plugins - ( Plugin stylesheets )
  • fonts
    • montserrat - ( montserrat fonts )
    • quicksand - ( quicksand fonts )
  • img
    • about
    • achievement
    • bg
    • favicon
    • logo
    • news
    • portfolio
    • service
  • js
    • plugins - ( Plugins js files )
  • scss
    • base - ( typography, font familys )
    • components - ( Component stylesheets )
    • layout - ( Layout stylesheets )
    • utilities - ( Mixins & variable stylesheets )

Local Server Installation

➣ There are the Four things to setup & run the theme.

1. Install & Start Xampp Server Click
2. How to Setup Theme Code Folder Click
3. Database Configuration Click (this theme have not use any database, because it's html template)
4. Run the theme into browser Click

Step-1 : ➣ Install & Start Xampp Server

➣ Download the letest version of Xampp & Install Xampp Server Click

➣ Click on Start button to start Apache & MySql into Xampp Server

➣ Now blow image show the running Xampp Server

Now Xammp Instalation process end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ Open unzip folder Borox - Personal Portfolio One Page HTML Template. and copy Borox-html folder as show below image

➣ Now open Xampp folder

➣ After that open htdocs folder

➣ Now paste already copied Borox-html folder into htdocs

Step-3 : ➣ Database Configuration

This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.

Step-4 : ➣ Run the landing into browser

➣ Open Browser and run the Landing page to type located theme path : localhost/Borox-html/ as show below image

Live Server Installation

➣ There are the Four things to setup & run the theme.

1. Hosting Account Click
2. How to Setup Theme Code Folder Click
3. Database Configuration Click (this theme have not use any database, because it's html template)
4. Run the theme into browser Click
Step-1 : ➣ Hosting Account

➣ You must have Hosting account. And if you don't have please purchase it before move ahed. Click

Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.

➣ Get Login into your hostinger account and open dashboard.

Now Hosting account end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ From Dashboard Click on File Manager as show below image

➣ Now upload Borox-html.zip folder into server

➣ After upload unzip this folder as shown below image

Now the Theme Code setup is finished here move to the next step below..

Step-3 : ➣ Database Configuration

This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.

Step-4 : ➣ Run the Landing Page into browser

➣ Open Browser and run the "Landing page" to type located theme path : yourdomain.com/Borox-html/ as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Colors Customization

Borox has #7963e0 color. If you want to change then replace the color #f15d52 to ex. "#4bc48c"

skin

Customization & Source Files

Fonts

First download fonts which you want. and then paste fonts file in font folder.
and Goto "scss > base > _typography", and change. after compile your code and run thml file.

typo

Logo

If you want to change logo. Goto "assets/img/logo" folder and change logo png image.

<a class="navbar-brand" href="index.html"><img src="assets/img/logo/logo.png" alt="logo"></a>

Menus

If you want to add menu and change menu name.

<ul class="navbar-nav mb-2 ml-auto" id="top-menu">
    <li class="nav-item active">
	<a class="nav-link bx-nav" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
	<a class="nav-link bx-nav" href="#about">About</a>
</li>
<li class="nav-item">
	<a class="nav-link bx-nav" href="#experience">Experience</a>
</li>
<li class="nav-item">
	<a class="nav-link bx-nav" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
	<a class="nav-link bx-nav" href="#news">News</a>
</li>
<li class="nav-item">
	<a class="nav-link bx-nav" href="#contact">Contact Us</a>
</li>
</ul>

Source File (CSS)

<!-- css All Plugins Files -->
    <link rel="stylesheet" href="assets/css/plugins/animate.css" />
    <link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
    <link rel="stylesheet" href="assets/css/plugins/jquery.fancybox.min.css" />
    <link rel="stylesheet" href="assets/css/plugins/aos.min.css" />
    <link rel="stylesheet" href="assets/css/plugins/owl.carousel.min.css" />

    <!-- Main Style -->
    <link rel="stylesheet" id="main_style" href="assets/css/style.css" />
    <link rel="stylesheet" href="assets/css/responsive.css" />

Source File (JS)

    <!-- Plugins JS -->
    <script src="assets/js/plugins/jquery-3.5.1.min.js"></script>
    <script src="assets/js/plugins/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.fancybox.min.js"></script>
    <script src="assets/js/plugins/mixitup.min.js"></script>
    <script src="assets/js/plugins/fontawesome.js"></script>
    <script src="assets/js/plugins/aos.min.js"></script>
    <script src="assets/js/plugins/owl.carousel.min.js"></script>
    <script src="assets/js/jquery.parallaxmouse.min.js"></script>

    <!-- Main Js -->
    <script src="assets/js/main.js"></script>

Free Resources

  • Google Fonts
  • Font Awesome Icons
  • Owl Carousel
  • AOS Animation
  • Animate

Thank You

Thank you again for download 'Borox', enjoy it and give us your valuable Review & Rating Here.

shapes